<template>
    <div>
        <div class="sign-content">
            <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"
                :lineColor="lineColor" :bgColor.sync="bgColor" />
        </div>
        <div style="text-align: right;">
            <el-button @click="handleReset">清 除</el-button>
            <el-button @click="closeHandleReset">取 消</el-button>
            <el-button type="primary" @click="handleGenerate">确 定</el-button>
        </div>

    </div>

</template>

<script>
import vueEsign from 'vue-esign'
export default {
    components: {
        vueEsign
    },
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    mounted() {
    },
    data() {
        return {
            lineWidth: 6,
            lineColor: '#000000',
            bgColor: '',
            resultImg: '',
            isCrop: false
        }
    },
    methods: {
        handleReset() {
            this.$refs.esign.reset()
            this.$emit('input', '')//更新父类
        },
        closeHandleReset() {
            this.$refs.esign.reset()
            this.$emit('input', '')//更新父类
            this.$emit('close')//关闭签名

        },
        handleGenerate() {
            this.$refs.esign.generate().then(res => {
                this.resultImg = res
                this.$emit('input', res)//更新父类
                this.$emit('ok') //确定签名

            }).catch(err => {
                this.$message.info('无任何签名，请重新签名') // 画布没有签字时会执行这里 'Not Signned'
            })
        }
    }
}
</script>

<style scoped>
.sign-content {
    border: 1px dashed #cfc7c7;
    width: 800px;
    height: 300px;
    margin: 10px auto;
    padding: 5px auto;
}
</style>